// pages/route-planning/route-planning.js
Page({
  data: {
    navHeight: 132, // 导航栏高度
    
    // 筛选标签
    filterTags: [
      { id: 'all', name: '全部线路' },
      { id: 'easy', name: '休闲观光' },
      { id: 'medium', name: '徒步健行' },
      { id: 'hard', name: '挑战登山' },
      { id: 'expert', name: '专业探险' }
    ],
    activeFilter: 'all',
    
    // 所有路线数据
    allRoutes: [
      {
        id: 1,
        title: '黑麋峰观景环线',
        description: '轻松游览主要观景点，适合全家出行，沿途风景优美，可欣赏山峰全貌',
        coverImage: '/images/景点-1.jpg',
        difficulty: 'easy',
        difficultyText: '休闲',
        duration: '2-3小时',
        spotsCount: 4,
        rating: 4.8,
        tags: ['观景', '拍照', '全家游'],
        spots: [
          { name: '黑麋峰观景台', duration: '45分钟' },
          { name: '观景亭', duration: '30分钟' },
          { name: '森林步道', duration: '60分钟' },
          { name: '游客中心', duration: '30分钟' }
        ]
      },
      {
        id: 2,
        title: '瀑布探秘之旅',
        description: '深入山谷探寻隐秘瀑布群，体验自然生态之美，适合喜欢亲水的游客',
        coverImage: '/images/景点-3.jpg',
        difficulty: 'medium',
        difficultyText: '中等',
        duration: '3-4小时',
        spotsCount: 5,
        rating: 4.9,
        tags: ['瀑布', '生态', '徒步'],
        spots: [
          { name: '瀑布群', duration: '90分钟' },
          { name: '森林步道', duration: '60分钟' },
          { name: '观景台', duration: '45分钟' },
          { name: '休息区', duration: '30分钟' },
          { name: '返程', duration: '45分钟' }
        ]
      },
      {
        id: 3,
        title: '玻璃栈道刺激体验',
        description: '挑战高空玻璃栈道，俯瞰峡谷美景，感受心跳加速的刺激体验',
        coverImage: '/images/景点-2.jpg',
        difficulty: 'hard',
        difficultyText: '困难',
        duration: '4-5小时',
        spotsCount: 6,
        rating: 4.7,
        tags: ['刺激', '高空', '挑战'],
        spots: [
          { name: '玻璃栈道', duration: '120分钟' },
          { name: '观景台', duration: '60分钟' },
          { name: '峡谷步道', duration: '90分钟' },
          { name: '休息亭', duration: '30分钟' },
          { name: '森林小径', duration: '45分钟' },
          { name: '出口', duration: '15分钟' }
        ]
      },
      {
        id: 4,
        title: '日出摄影专线',
        description: '专为摄影爱好者设计的日出观赏线路，包含最佳拍摄点位推荐',
        coverImage: '/images/攻略照片1.jpg',
        difficulty: 'expert',
        difficultyText: '专业',
        duration: '5-6小时',
        spotsCount: 7,
        rating: 4.9,
        tags: ['日出', '摄影', '专业'],
        spots: [
          { name: '凌晨集合点', duration: '30分钟' },
          { name: '日出观景台', duration: '120分钟' },
          { name: '云海拍摄点', duration: '90分钟' },
          { name: '森林光影区', duration: '60分钟' },
          { name: '瀑布长曝点', duration: '90分钟' },
          { name: '山顶全景台', duration: '60分钟' },
          { name: '返程休息', duration: '30分钟' }
        ]
      },
      {
        id: 5,
        title: '亲子自然课堂',
        description: '寓教于乐的自然探索路线，孩子们可以学习植物知识，观察小动物',
        coverImage: '/images/攻略照片2.jpg',
        difficulty: 'easy',
        difficultyText: '简单',
        duration: '2小时',
        spotsCount: 3,
        rating: 4.6,
        tags: ['亲子', '教育', '自然'],
        spots: [
          { name: '自然教育基地', duration: '60分钟' },
          { name: '植物观察区', duration: '45分钟' },
          { name: '小动物观察点', duration: '15分钟' }
        ]
      },
      {
        id: 6,
        title: '极限挑战全程',
        description: '黑麋峰最具挑战性的完整穿越路线，需要良好的体力和户外经验',
        coverImage: '/images/攻略照片3.jpg',
        difficulty: 'expert',
        difficultyText: '极限',
        duration: '全天',
        spotsCount: 10,
        rating: 4.8,
        tags: ['极限', '穿越', '挑战'],
        spots: [
          { name: '起点准备区', duration: '30分钟' },
          { name: '第一段爬升', duration: '90分钟' },
          { name: '中途休息点', duration: '30分钟' },
          { name: '核心挑战段', duration: '120分钟' },
          { name: '午餐休息', duration: '60分钟' },
          { name: '下午挑战', duration: '150分钟' },
          { name: '最终冲刺', duration: '90分钟' },
          { name: '胜利观景台', duration: '45分钟' },
          { name: '下山路段', duration: '120分钟' },
          { name: '终点庆祝', duration: '30分钟' }
        ]
      },
      {
        id: 7,
        title: '夜间观星之旅',
        description: '夜晚山顶观星体验，远离城市光污染，仰望璀璨星空',
        coverImage: '/images/攻略照片4.jpg',
        difficulty: 'medium',
        difficultyText: '中等',
        duration: '3-4小时',
        spotsCount: 4,
        rating: 4.7,
        tags: ['观星', '夜景', '浪漫'],
        spots: [
          { name: '夜间集合点', duration: '30分钟' },
          { name: '观星平台', duration: '150分钟' },
          { name: '夜景拍摄点', duration: '60分钟' },
          { name: '安全返程', duration: '60分钟' }
        ]
      },
      {
        id: 8,
        title: '秋季红叶专线',
        description: '秋季限定红叶观赏路线，最佳观赏期为10-11月',
        coverImage: '/images/攻略照片5.jpg',
        difficulty: 'easy',
        difficultyText: '轻松',
        duration: '2-3小时',
        spotsCount: 5,
        rating: 4.9,
        tags: ['红叶', '秋景', '季节限定'],
        spots: [
          { name: '红叶观赏区一', duration: '45分钟' },
          { name: '红叶观赏区二', duration: '60分钟' },
          { name: '最佳拍照点', duration: '30分钟' },
          { name: '红叶小径', duration: '45分钟' },
          { name: '纪念品区', duration: '20分钟' }
        ]
      }
    ],
    
    // 瀑布流数据
    leftRoutes: [],
    rightRoutes: [],
    leftHeight: 0,
    rightHeight: 0,
    
    // 加载状态
    isLoading: false
  },

  onLoad() {
    this.initWaterfallLayout();
  },

  // 初始化瀑布流布局
  initWaterfallLayout() {
    const routes = this.getFilteredRoutes();
    let leftRoutes = [];
    let rightRoutes = [];
    let leftHeight = 0;
    let rightHeight = 0;

    routes.forEach(route => {
      // 根据难度设置不同的卡片高度（包括图片和信息区域）
      let cardHeight = 0;
      switch (route.difficulty) {
        case 'easy':
          cardHeight = 520; // 320rpx图片 + 200rpx信息
          break;
        case 'medium':
          cardHeight = 600; // 400rpx图片 + 200rpx信息
          break;
        case 'hard':
          cardHeight = 680; // 480rpx图片 + 200rpx信息
          break;
        case 'expert':
          cardHeight = 560; // 360rpx图片 + 200rpx信息
          break;
        default:
          cardHeight = 560;
      }

      // 选择高度较小的列放置卡片
      if (leftHeight <= rightHeight) {
        leftRoutes.push(route);
        leftHeight += cardHeight + 24; // 加上间距
      } else {
        rightRoutes.push(route);
        rightHeight += cardHeight + 24;
      }
    });

    this.setData({
      leftRoutes,
      rightRoutes,
      leftHeight,
      rightHeight
    });
  },

  // 根据筛选条件获取路线
  getFilteredRoutes() {
    const { allRoutes, activeFilter } = this.data;
    
    if (activeFilter === 'all') {
      return allRoutes;
    }
    
    return allRoutes.filter(route => route.difficulty === activeFilter);
  },

  // 筛选标签点击事件
  onFilterTap(e) {
    const filter = e.currentTarget.dataset.filter;
    
    if (filter === this.data.activeFilter) {
      return; // 如果点击的是当前激活的标签，不做任何操作
    }

    this.setData({
      activeFilter: filter,
      isLoading: true
    });

    // 模拟加载效果
    setTimeout(() => {
      this.initWaterfallLayout();
      this.setData({
        isLoading: false
      });
    }, 500);
  },

  // 路线卡片点击事件
  onRouteCardTap(e) {
    const route = e.currentTarget.dataset.route;
    console.log('点击了路线卡片:', route);
    
    // 跳转到路线详情页面
    wx.navigateTo({
      url: `/pages/route-detail/route-detail?id=${route.id}`,
      success: () => {
        // 将路线数据存储到缓存中
        wx.setStorageSync('routeDetail', route);
      },
      fail: (err) => {
        console.error('跳转失败:', err);
        wx.showToast({
          title: '页面跳转失败',
          icon: 'error'
        });
      }
    });
  },

  // 下拉刷新
  onPullDownRefresh() {
    console.log('下拉刷新');
    
    // 模拟刷新数据
    setTimeout(() => {
      this.initWaterfallLayout();
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '刷新成功',
        icon: 'success',
        duration: 1500
      });
    }, 1000);
  },

  // 上拉加载更多
  onReachBottom() {
    if (this.data.isLoading) return;
    
    console.log('上拉加载更多');
    this.setData({ isLoading: true });
    
    // 模拟加载更多数据
    setTimeout(() => {
      const newRoutes = [
        {
          id: Date.now(),
          title: '新发现的神秘路线',
          description: '最新开发的探索路线，带你发现黑麋峰的隐秘之美',
          coverImage: '/images/民宿1.jpg',
          difficulty: (() => {
            const difficulties = ['easy', 'medium', 'hard', 'expert'];
            return difficulties[Math.floor(Math.random() * difficulties.length)];
          })(),
          difficultyText: (() => {
            const texts = ['简单', '中等', '困难', '专业'];
            return texts[Math.floor(Math.random() * texts.length)];
          })(),
          duration: '2-4小时',
          spotsCount: Math.floor(Math.random() * 8) + 3,
          rating: (Math.random() * 1 + 4).toFixed(1),
          tags: ['新路线', '探索', '神秘'],
          spots: []
        }
      ];
      
      const updatedRoutes = [...this.data.allRoutes, ...newRoutes];
      this.setData({
        allRoutes: updatedRoutes,
        isLoading: false
      }, () => {
        this.initWaterfallLayout();
      });
    }, 1500);
  },

  // 导航栏返回事件
  onNavBackTap() {
    wx.navigateBack({
      fail: () => {
        // 如果没有上一页，则返回首页
        wx.reLaunch({
          url: '/pages/index/index'
        });
      }
    });
  },

  // 导航栏高度变化事件
  onNavHeightChange(e) {
    const { totalHeight } = e.detail;
    this.setData({
      navHeight: totalHeight
    });
  },

  // 页面分享
  onShareAppMessage() {
    return {
      title: '黑麋峰精品线路推荐',
      path: '/pages/route-planning/route-planning',
      imageUrl: '/images/景点-1.jpg'
    };
  },

  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: '黑麋峰精品线路推荐 - 发现最美的旅行路线',
      imageUrl: '/images/景点-1.jpg'
    };
  }
});
